<template>
  <div class="home">
    <!-- 轮播图组件 -->
    <swiper :banner="banner"></swiper>
    <!-- 推荐组件 -->
    <home-rcommend :recommend="recommend"></home-rcommend>
    <!-- 切换 -->
    <tab-bar :title="title" @itemClick="itemClick"></tab-bar>
    <!-- 那边是传1 2 3索引 这边是传ture/false -->
   
  </div>
</template>

<script>
import homeRequest from "network/home.js";
const { getHomeMultidata } = homeRequest;
import Swiper from "components/common/swiper/Swiper";
import TabBar from "../../components/common/tabbar/TabBar";
import HomeRcommend from "./childComps/HomeRcommend";

export default {
  name: "Home",
  components: {
    Swiper,
    HomeRcommend,
    TabBar
  },
  data() {
    return {
      banner: [],
      recommend: [],
      title: ["流行", "新款", "精品"],
     
    };
  },
  methods: {
    // *******************************网络请求*******************************
    async _getHomeMultidata() {
      let res = await getHomeMultidata();
      this.banner = res.data.banner.list;
      this.recommend = res.data.recommend.list;
    },
    // *******************************逻辑处理*******************************
    itemClick(index) {
      console.log(index, this.title[index]);
    },
   
  },
  computed: {},
  watch: {},
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this._getHomeMultidata();
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  updated() {}, //生命周期 - 更新之后
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='less' scoped>
//@import ; 引入公共css类
.demo {
  width: 100px;
  height: 100px;
  background: darkblue;
}
.test {
  background: darkcyan;
}
</style>